<style>
  .upload-file{
    display: flex;
    flex-direction: row-reverse;
    height: 40px;
  }

  .upload-file .el-upload-list {
    display: flex;
    flex-direction: row;
    width: calc(100% - 112px);
    border: 1px solid #dcdfe6;
    margin-right: 16px;
    border-radius: 4px;
  }

  .upload-file .el-upload-list li{
    margin-top: 0;
    line-height: 38px;
    vertical-align: middle;
  }

  .upload-file .el-upload-list li .el-icon-close{
    line-height: inherit;
    top:0;
  }
</style>
<template>
  <div>
    <el-form :model="vendorForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 50%;margin: 16px">
      <el-form-item label="城市名称" prop="cityName">
        <el-input v-model="vendorForm.cityName"></el-input>
      </el-form-item>
      <el-form-item label="上传附件">
        <el-upload
          class="upload-file"
          ref="upload"
          :action="lib.config.host.system + '/common/fileupload/upload?tableName=tableName&tlId=123&busAction=upload'"
          :data="vendorForm"
          :multiple="false"
          :limit="1"
          name="businessScopeFile"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" type="primary">选取文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="供应商">
        <select-table v-model="data1" width="800px" @on-selection-data="getSelectData"></select-table>
      </el-form-item>
      <el-form-item label="品类">
        <select-tree :multiple="false" ref="selectTree" v-model="data2"></select-tree>
      </el-form-item>
      <el-form-item label="地址">
        <select-city :country.sync="country" :province.sync="province" :city.sync="city"></select-city>
      </el-form-item>
      <el-form-item>
        <UE v-model="defaultMsg" :config="config" ref="ue"></UE>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="getUEContent">获取内容</el-button>
        <el-button @click="getUEContentTxt">获取内容</el-button>
        <el-button @click="disable">dis</el-button>
        <el-button @click="enable">enable</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import SelectTable from '../select-ext/select-table';
  import SelectTree from '../select-ext/select-tree';
  import SelectCity from '../select-ext/select-city';
  import UE from '../ue/ue';
  export default {
    data(){
      return {
        vendorForm:{
          cityName:'',
        },
        fileList: [],
        data1: '',
        data2: '',
        defaultMsg: '2333',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350,
          enableAutoSave: false,
        },
        country:'',
        province:'',
        city: ''
      };
    },
    created(){
      this.showMsg('info', '1234');
      // this.$nextTick(()=>{
      //   this.$refs.ue.disable();
      // });
    },
    components: {
      UE,
      SelectTable,
      SelectTree,
      SelectCity
    },
    methods:{
      restForm(formName){
        this.$refs[formName].resetFields();
      },
      submitForm(){
        console.log(this.$refs.upload);
        // this.$refs.upload.submit();
      },
      getSelectData(data){

      },
      getUEContent() {
         let content = this.$refs.ue.getUEContent(); // 调用子组件方法
         this.$notify({
           message: content,
           type: 'success'
         });
         console.log(content)
//        this.defaultMsg = this.$refs.ue.getUEContentTxt() + '123';
      },
      getUEContentTxt() {
        let content = this.$refs.ue.getUEContentTxt(); // 调用子组件方法
        this.$notify({
          message: content,
          type: 'success'
        });
        console.log(content)
      },
      disable(){
        this.$refs.ue.disable();
      },
      enable(){
        this.$refs.ue.enable();
      },
      handleExceed(files, fileList){
        debugger
        console.log(files);
        console.log(fileList);
      }
    }
  }
</script>
